<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="../examples&source/css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="../examples&source/css/noneed.css" media="screen" />


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    
    <script type="text/javascript" src="../examples&source/rs-plugin/js/jquery.themepunch.tools.min.js"></script>        
    <script type="text/javascript" src="../examples&source/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="../examples&source/css/extralayers.css" media="screen" />	
	<link rel="stylesheet" type="text/css" href="../examples&source/rs-plugin/css/settings.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	
	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->


	<article class="">

	<!-- START REVOLUTION SLIDER 4.5.0 fullwidth mode -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,700,800,900' rel='stylesheet' type='text/css'>
	
	<div id="slider" class="rev_slider fullwidthabanner">
		<ul>	<!-- SLIDE  -->
			<li data-transition="slideup" data-slotamount="7" data-masterspeed="1000" data-thumb="../examples&source/images/parallax_thumb1.jpg"  data-saveperformance="off"  data-title="Parallax 3D">
				<!-- MAIN IMAGE -->
				<img src="../examples&source/images/dummy.png"  alt="greenbg" data-lazyload="../examples&source/images/greenbg.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->
		
				<!-- LAYER NR. 1 -->
				<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-1"
					data-x="309"
					data-y="69" 
					data-speed="1000"
					data-start="800"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 2;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/3dlayer_6.png">
				</div>
		
				<!-- LAYER NR. 2 -->
				<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-1"
					data-x="-121"
					data-y="-238" 
					data-speed="1000"
					data-start="950"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-end="14950"
		data-endspeed="1000"
					style="z-index: 3;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/3dlayer_5.png">
				</div>
		
				<!-- LAYER NR. 3 -->
				<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-1"
					data-x="-186"
					data-y="81" 
					data-speed="1000"
					data-start="1200"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 4;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/3dlayer_4.png">
				</div>
		
				<!-- LAYER NR. 4 -->
				<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-2"
					data-x="56"
					data-y="437" 
					data-speed="1000"
					data-start="1400"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 5;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/3dlayer_3.png">
				</div>
		
				<!-- LAYER NR. 5 -->
				<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-2"
					data-x="353"
					data-y="436" 
					data-speed="1000"
					data-start="1700"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 6;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/3dlayer_2.png">
				</div>
		
				<!-- LAYER NR. 6 -->
				<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-3"
					data-x="100"
					data-y="55" 
					data-speed="1000"
					data-start="2000"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 7;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/3dlayer_1.png">
				</div>
		
				<!-- LAYER NR. 7 -->
				<div class="tp-caption black_heavy_60 customin randomrotateout tp-resizeme rs-parallaxlevel-3"
					data-x="746"
					data-y="230" 
					data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
					data-speed="1000"
					data-start="2400"
					data-easing="Power4.easeOut"
					data-splitin="chars"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">Fancy Stuff
				</div>
		
				<!-- LAYER NR. 8 -->
				<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
					data-x="750"
					data-y="320" 
					data-speed="1000"
					data-start="2900"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">Assign Parallax Levels
				</div>
		
				<!-- LAYER NR. 9 -->
				<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
					data-x="750"
					data-y="360" 
					data-speed="1000"
					data-start="3000"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 10; max-width: auto; max-height: auto; white-space: nowrap;">Control with Scroll or Mouse Movement
				</div>
		
				<!-- LAYER NR. 10 -->
				<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
					data-x="750"
					data-y="400" 
					data-speed="1000"
					data-start="3100"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 11; max-width: auto; max-height: auto; white-space: nowrap;">Strinking Effects for your Website
				</div>
		
				<!-- LAYER NR. 11 -->
				<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
					data-x="750"
					data-y="440" 
					data-speed="1000"
					data-start="3200"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 12; max-width: auto; max-height: auto; white-space: nowrap;">Easy Setup
				</div>
		
				<!-- LAYER NR. 12 -->
				<div class="tp-caption green_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
					data-x="750"
					data-y="480" 
					data-speed="1000"
					data-start="3300"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="1000"
					style="z-index: 13; max-width: auto; max-height: auto; white-space: nowrap;">And Much More ...
				</div>
			</li>
			<!-- SLIDE  -->
			<li data-transition="fade" data-slotamount="7" data-masterspeed="600" data-thumb="../examples&source/images/parallax_thumb2.jpg"  data-saveperformance="off"  data-title="Forest View">
				<!-- MAIN IMAGE -->
				<img src="../examples&source/images/dummy.png"  alt="forest1" data-lazyload="../examples&source/images/forest1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->
		
				<!-- LAYER NR. 1 -->
				<div class="tp-caption greenishbg_heavy_70 customin fadeout tp-resizeme rs-parallaxlevel-3"
					data-x="center" data-hoffset="0"
					data-y="center" data-voffset="0"
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="600"
					data-start="900"
					data-easing="Power4.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="600"
					style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">Parallax with Scroll
				</div>
		
				<!-- LAYER NR. 2 -->
				<div class="tp-caption borderbox_725x130 tp-fade fadeout tp-resizeme rs-parallaxlevel-3"
					data-x="center" data-hoffset="0"
					data-y="center" data-voffset="0"
					data-speed="600"
					data-start="950"
					data-easing="Power4.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="600"
					style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">
				</div>
			</li>
			<!-- SLIDE  -->
			<li data-transition="zoomin" data-slotamount="7" data-masterspeed="1500" data-thumb="../examples&source/images/parallax_thumb3.jpg"  data-saveperformance="off"  data-title="Mobile Interaction">
				<!-- MAIN IMAGE -->
				<img src="../examples&source/images/dummy.png"  alt="slidebg2" data-lazyload="../examples&source/images/slidebg2.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->
		
				<!-- LAYER NR. 1 -->
				<div class="tp-caption lfb rs-parallaxlevel-3"
					data-x="center" data-hoffset="-40"
					data-y="bottom" data-voffset="-10"
					data-speed="1500"
					data-start="2400"
					data-easing="Power4.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 2;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/ipad2.png">
				</div>
		
				<!-- LAYER NR. 2 -->
				<div class="tp-caption customin rs-parallaxlevel-1"
					data-x="515"
					data-y="331" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="500"
					data-start="4400"
					data-easing="Power4.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 3;"><div class=" rs-pulse" 			data-easing="Power4.easeInOut"
					data-speed="0.5"
					data-zoomstart="0.75"
					data-zoomend="1"
		>
		<img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/pulse1.png">
				</div>
				</div>
		
				<!-- LAYER NR. 3 -->
				<div class="tp-caption lfb rs-parallaxlevel-1"
					data-x="94"
					data-y="322" 
					data-speed="1500"
					data-start="3400"
					data-easing="Power4.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 4;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/hand1.png">
				</div>
		
				<!-- LAYER NR. 4 -->
				<div class="tp-caption lfb rs-parallaxlevel-4"
					data-x="693"
					data-y="191" 
					data-speed="1500"
					data-start="2900"
					data-easing="Power4.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 5;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/iphone.png">
				</div>
		
				<!-- LAYER NR. 5 -->
				<div class="tp-caption black_heavy_70 customin randomrotateout tp-resizeme rs-parallaxlevel-1"
					data-x="315"
					data-y="40" 
					data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
					data-speed="500"
					data-start="1300"
					data-easing="Power3.easeInOut"
					data-splitin="chars"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-end="13950"
		data-endspeed="2000"
					style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">Mobile
				</div>
		
				<!-- LAYER NR. 6 -->
				<div class="tp-caption customin randomrotateout rs-parallaxlevel-1"
					data-x="434"
					data-y="98" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="300"
					data-start="1600"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="2000"
					style="z-index: 7;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/largegreen.png">
				</div>
		
				<!-- LAYER NR. 7 -->
				<div class="tp-caption light_heavy_70 customin randomrotateout tp-resizeme rs-parallaxlevel-1"
					data-x="448"
					data-y="106" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="300"
					data-start="1700"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-end="13950"
		data-endspeed="2000"
					style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">Device
				</div>
		
				<!-- LAYER NR. 8 -->
				<div class="tp-caption black_bold_40 skewfromrightshort randomrotateout tp-resizeme rs-parallaxlevel-1"
					data-x="619"
					data-y="177" 
					data-speed="500"
					data-start="1950"
					data-easing="Power3.easeInOut"
					data-splitin="chars"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="2000"
					style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">Interaction
				</div>
			</li>
			<!-- SLIDE  -->
			<li data-transition="zoomout" data-slotamount="1" data-masterspeed="1500" data-thumb="../examples&source/images/parallax_thumb4.jpg"  data-saveperformance="off"  data-title="Fixed-Size Video">
				<!-- MAIN IMAGE -->
				<img src="../examples&source/images/dummy.png"  alt="citybg" data-lazyload="../examples&source/images/citybg.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->
		
				<!-- LAYER NR. 1 -->
				<div class="tp-caption white_bold_bg_20 sfl tp-resizeme rs-parallaxlevel-1"
					data-x="766"
					data-y="373" 
					data-speed="1000"
					data-start="2600"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">Vimeo
				</div>
		
				<!-- LAYER NR. 2 -->
				<div class="tp-caption red_bold_bg_20 sfl tp-resizeme rs-parallaxlevel-1"
					data-x="766"
					data-y="408" 
					data-speed="1000"
					data-start="2900"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">YouTube
				</div>
		
				<!-- LAYER NR. 3 -->
				<div class="tp-caption blue_bold_bg_20 sfl tp-resizeme rs-parallaxlevel-1"
					data-x="768"
					data-y="443" 
					data-speed="1000"
					data-start="3200"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">HTML5
				</div>
		
				<!-- LAYER NR. 4 -->
				<div class="tp-caption customin rs-parallaxlevel-2"
					data-x="925"
					data-y="299" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="300"
					data-start="1900"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 5;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/redbg.png">
				</div>
		
				<!-- LAYER NR. 5 -->
				<div class="tp-caption light_heavy_40 customin tp-resizeme rs-parallaxlevel-2"
					data-x="940"
					data-y="302" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="300"
					data-start="2200"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">with
				</div>
		
				<!-- LAYER NR. 6 -->
				<div class="tp-caption black_heavy_60 lft tp-resizeme rs-parallaxlevel-2"
					data-x="808"
					data-y="251" 
					data-speed="600"
					data-start="2600"
					data-easing="Power3.easeInOut"
					data-splitin="chars"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">Videos
				</div>
		
				<!-- LAYER NR. 7 -->
				<div class="tp-caption light_heavy_70 lfr tp-resizeme rs-parallaxlevel-2"
					data-x="1045"
					data-y="282" 
					data-speed="600"
					data-start="2500"
					data-easing="Power3.easeInOut"
					data-splitin="chars"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">API
				</div>
		
				<!-- LAYER NR. 8 -->
				<div class="tp-caption white_thin_34 customin tp-resizeme rs-parallaxlevel-2"
					data-x="1001"
					data-y="347" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="300"
					data-start="2800"
					data-easing="Power3.easeInOut"
					data-splitin="none"
					data-splitout="none"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="300"
					style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">Functions
				</div>
		
				<!-- LAYER NR. 9 -->
				<div class="tp-caption customin fadeout rs-parallaxlevel-3"
					data-x="-122"
					data-y="12" 
					data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
					data-speed="500"
					data-start="1300"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="600"
					style="z-index: 10;"><img src="../examples&source/images/dummy.png" alt="" data-lazyload="../examples&source/images/ipad_dark.png">
				</div>
		
				<!-- LAYER NR. 10 -->
				<div class="tp-caption tp-fade fadeout rs-parallaxlevel-3"
					data-x="78"
					data-y="103" 
					data-speed="300"
					data-start="1600"
					data-easing="Power3.easeInOut"
					data-elementdelay="0.1"
					data-endelementdelay="0.1"
					data-endspeed="600"
					data-autoplay="false"
					data-autoplayonlyfirsttime="false"
					style="z-index: 11;"><iframe src='http://player.vimeo.com/video/76127035?title=0&byline=0&portrait=0;api=1' width='625' height='467' style='width:625px;height:467px;'></iframe>
				</div>
			</li>
		</ul>
	<div class="tp-bannertimer"></div>	</div>
	</div>			
				<script type="text/javascript">
	
						
					/******************************************
						-	PREPARE PLACEHOLDER FOR SLIDER	-
					******************************************/
									
					 
					jQuery(document).ready(function() {
						jQuery('#slider').show().revolution(
							{	
							dottedOverlay:"none",
							delay:16000,
							startwidth:1170,
							startheight:700,
							hideThumbs:200,
							
							thumbWidth:100,
							thumbHeight:50,
							thumbAmount:4,
							
							navigationType:"none",
							navigationArrows:"solo",
							navigationStyle:"preview1",
							
							touchenabled:"on",
							onHoverStop:"on",
							
							swipe_velocity: 0.7,
							swipe_min_touches: 1,
							swipe_max_touches: 1,
							drag_block_vertical: false,
													
							parallax:"scroll",
							parallaxBgFreeze:"on",
							parallaxLevels:[10,20,30,40,50,60,70,80,90,100],
													
							keyboardNavigation:"off",
							
							fullWidth:"on",
							spinner:"spinner4",
							
	
							forceFullWidth:"on",												
						});
					});	//ready
					
				</script>								
	<!-- END REVOLUTION SLIDER --></div>
	</article><!-- Content End -->








<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

	<section class="container">
		<h2>Parallax Scroll Effect</h2>
		<p>To enable the Parallax effect on scroll, you will need to define an array of Parallax Levels and the Parallax Art within the Slider option.</p>		
		<p>Furthermore do not forget to set the Layers which you wish to move in parallax mode add the Parallax Class as well.</p> 

	   <div style="width:100%; height:40px"></div>
	  <h3>How to add Parallax mode to a layer ?</h3>
	  <pre>	  		  	
		&lt;div class="tp-caption customin fadeout rs-parallaxlevel-3"
			data-x="-122"
			data-y="12" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="500"
			data-start="1300"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="600"
			style="z-index: 10;"&gt;&lt;img src="images/dummy.png" alt="" data-lazyload="images/ipad_dark.png"&gt;
		&lt;/div&gt;
	  </pre>
	  
  	  <h3>What option do i need to set?</h3>
  	  <pre>
  	  jQuery(document).ready(function() {
					jQuery('#slider').show().revolution(
						{	
						dottedOverlay:"none",
						delay:16000,
						startwidth:1170,
						startheight:700,
						hideThumbs:200,
						
						thumbWidth:100,
						thumbHeight:50,
						thumbAmount:4,
						
						navigationType:"none",
						navigationArrows:"solo",
						navigationStyle:"preview1",
						
						touchenabled:"on",
						onHoverStop:"on",
						
						swipe_velocity: 0.7,
						swipe_min_touches: 1,
						swipe_max_touches: 1,
						drag_block_vertical: false,
												
						<strong>parallax:"scroll",
						parallaxBgFreeze:"on",
						parallaxLevels:[10,20,30,40,50,60,70,80,90,100],</strong>
												
						keyboardNavigation:"off",
						
						fullWidth:"on",
						spinner:"spinner4",
						

						forceFullWidth:"on",												
					});
				});	//ready
  	  </pre>
	</section>






</body>